import React from 'react';
import { List, SearchBar, WhiteSpace, WingBlank, ListView } from 'antd-mobile';
import { connect } from 'dva';
import moment from 'moment';
import _ from 'lodash';
import Container from '../components/Base/Container';
import MyIcon from '../components/Base/MyIcon';
import styles from './ExamRecordsPage.less';
import { routerRedux } from "dva/router";
import classnames from 'classnames';

const ListItem = List.Item;
class Bonus extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
    };
  }


  renderRow = (rowData, a, index) => {
    return (<ListItem
      onClick={() => {
      }}
    >
      <div className={styles.header}>
        <span className={classnames({ [styles.header_item]: true, [styles.item_text]: true })} >{rowData.examLibName}</span>
        <span className={classnames({ [styles.header_span1]: true, [styles.item_text]: true })}>{rowData.startTime ? moment(rowData.startTime).utcOffset(8).format('YYYY-MM-DD HH:mm') : ''}</span>
        <span className={classnames({ [styles.header_span2]: true, [styles.item_text]: true })}>{rowData.score}</span>
      </div>
    </ListItem>);
  };

  componentDidMount() {
    this.props.dispatch({
      type: 'exam/fetchExamList',
      payload: { },
    });
  }

  onSearch = (keywords) => {
    this.props.dispatch({
      type: 'exam/fetchExamList',
      payload: { filter: { keywords } },
    });
  }

  onCancel = () => {
    this.props.dispatch({
      type: 'exam/fetchExamList',
      payload: { },
    });
  }

  render() {
    const { examList } = this.props;
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });

    return (
      <Container title="考试记录">
        <div>
          <div>
            <div className={styles.search}>
              <WingBlank size="sm">
                <SearchBar
                  placeholder="试卷名称"
                  onSubmit={this.onSearch}
                  onCancel={this.onCancel}
                />
              </WingBlank>
            </div>

            <div className={styles.totalDesc}>
              <span>
                <MyIcon
                  type="trips" color="#ff2828" size="xxs"
                  style={{ position: 'relative', top: 2, marginRight: 8 }}
                />总计： <span style={{ color: 'red' }}>{examList ? examList.length : 0}</span> 条 {this.state.label}</span>
            </div>

            <ListView
              dataSource={dataSource.cloneWithRows(examList || [])}
              renderHeader={() => (
                <div>
                  <div className={styles.header}>
                    <span className={styles.header_item}>试卷名称</span>
                    <span className={styles.header_span1} >考试时间</span>
                    <span className={styles.header_span2} >分数</span>
                  </div>
                </div>
              )}
              renderRow={this.renderRow}
              pageSize={20}
              initialListSize={20}
              // scrollRenderAheadDistance={500}
              scrollEventThrottle={20}
              // onEndReached={this.onEndReached}
              // onEndReachedThreshold={10}
              useBodyScroll
            />
          </div>
          <WhiteSpace size="lg" />
        </div>
      </Container>
    );
  }
}


export default connect((state) => {
  return {
    examList: state.exam.examList,
    user: state.auth.currentUser,
  };
},
  (dispatch) => {
    return {
      dispatch,
    };
  },
)(Bonus);
